<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>form</title>
  <script src="/vue.js"></script>
</head>
<body>
  <div id="root">
    <form @submit.prevent="handleSubmit">
      <input type="text" v-model="textValue">
      <br>
      <textarea name="" id="" cols="30" rows="10" v-model="textareaValue"></textarea>
      <br>
      <select v-model="selectValue" :multiple="true">
        <option>上海</option>
        <option>北京</option>
        <option>深圳</option>
      </select>
      <br>
      <br>
      <input type="checkbox" value="a" v-model="checkedValue">
      <input type="checkbox" value="b" v-model="checkedValue">
      <input type="checkbox" value="c" v-model="checkedValue">
      {{checkedValue}}
      <br>
      <br>
      <input type="radio" value="篮球" v-model="radioValue">
      <input type="radio" value="足球" v-model="radioValue">
      <input type="radio" value="乒乓球" v-model="radioValue">
      {{radioValue}}
      <br>
      <br>
      <input type="text" v-model="numberValue">
      <br>
      <br>
      <input type="text" v-model.trim="text2Value">
      <br>
      <br>
      <input type="text" v-model.lazy="text3Value"> {{text3Value}}
      <br>
      <br>
      <input type="submit" value="提交">
    </form>
  </div>
  <script>
    var vm = new Vue({
      el: '#root',
      data: {
        textValue: '',
        textareaValue: '',
        selectValue: [],
        checkedValue: ['a'],
        radioValue: '',
        numberValue: 3,
        text2Value: '',
        text3Value: ''
      },
      methods: {
        handleSubmit() {
          // console.log(this.textValue)
          // console.log(this.textareaValue)
          // console.log(this.selectValue)

          // console.log(this.numberValue === '34a')
          console.log(this.text2Value)
        },
        // handleInput(e) {
        //   this.textValue = e.target.value
        // }
        // handleChange(e) {
        //   this.text3Value = e.target.value
        // }
      },
    })
  </script>
</body>
</html>